<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<script src="js/axios.min.js"></script>
<div id="app">
    <el-select v-model="value" placeholder="请选择要上传的表">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-upload
            :on-change="fileChange"
            accept=".xlsx"
            action
            :limit="limitNum"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :http-request="importHandle">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
    <template slot-scope="scope">
        <el-button @click="download(scope,row)" type="text" size="small">下载</el-button>
    </template>
</div>

</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            limitNum: 1,  // 上传excell时，同时允许上传的最大数
            fileList: [],   // excel文件列表
            options: [{
                value: '1',
                label: '挥发油'
            }, {
                value: '2',
                label: '来源中药'
            }, {
                value: '3',
                label: '挥发油组成信息'
            },
                {
                    value: '4',
                    label: '挥发油组分化合物结构'
                },
                {
                    value: '5',
                    label: '挥发油应用信息'
                },
                {
                value: '6',
                    label: '促透药物信息'
                },
                // {
                //     value: '9',
                //     label: '用户'
                // }
                ],
            value: '',
            msg:""
        },
        methods: {
            fileChange(file, fileList) {
                this.fileList.push(file.raw) ;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件`);
            },
            // 文件上传成功
            handleSuccess(res, file, fileList) {
                this.$message.success('文件上传成功')
            },

            // 文件上传失败
            handleError(err, file, fileList) {
                this.$message.error('文件上传失败')
            },
            importHandle(item) {
                const form = new FormData();
                const fileObj = item.file;
                console.log(fileObj);
                form.append('file', fileObj);

                axios.post("http://localhost:8080/admin/upload?id="+this.value,form).then(res=>{

                })
            }
        }

    })


</script>
</html>